.box-message-box-view {
  .box-message-box-mask {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    animation: box-message-box-mask-anim 0.4s ease-in-out forwards;
  }
  .box-message-box {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 500px;
    max-width: 90vw;
    min-width: 10vw;
    background-color: var(--ui-backgound-2);
    border-radius: 5px;
    z-index: 1000;
    padding: 10px 20px;
    animation: box-message-box-show-anim 0.3s ease-in-out forwards;
    .top-view {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 15px;
      .title {
        font-size: 1.3rem;
        font-weight: #353638;
        align-content: center;
      }
      .close {
        width: 20px;
        height: 20px;
        user-select: none;
        display: block;
        cursor: pointer;
        box-sizing: border-box;
        svg {
          width: 100%;
          height: 100%;
        }
        path {
          fill: #8a8a8a;
          transition: 0.3s;
        }
        svg:hover {
          path {
            fill: var(--ui-backgound);
          }
        }
      }
    }
    .content-view {
      color: #606266;
      white-space: pre-wrap;
      // word-break: break-all;
      word-wrap: break-word;
      font-size: 0.9rem;
      margin-bottom: 10px;
    }
    .bottom-view {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: right;
      gap: 10px;
      user-select: none;
      .confirm {
        background-color: var(--ui-backgound);
        color: var(--ui-text);
        padding: 3px 10px;
        font-size: 0.9rem;
        border-radius: 5px;
        cursor: pointer;
      }
      .confirm:hover {
        filter: brightness(150%);
      }
      .cancel {
        color: #606266;
        padding: 3px 10px;
        font-size: 0.9rem;
        border-radius: 5px;
        cursor: pointer;
        border: 1px solid #dcdfe6;
        transition: 0.3s;
      }
      .cancel:hover {
        color: var(--ui-backgound);
        border: 1px solid var(--ui-backgound);
      }
    }
  }
  @keyframes box-message-box-mask-anim {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
  @keyframes box-message-box-show-anim {
    0% {
      opacity: 0;
      transform: translate(-50%, calc(-20px - 50%));
    }
    100% {
      opacity: 1;
      transform: translate(-50%, -50%);
    }
  }
}
